<style>
.cart-msk {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: none;
  opacity: 0;
  transition: all 0.3s ease-in-out;

  .cart-msk-box {
    width: 8.5067rem;
    height: 4.0267rem;
    background-color: $white-color;
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    border-radius: 0.2667rem;
    box-sizing: border-box;
    text-align: center;

    h6 {
      font-size: .4267rem;
      font-weight: 400;
      margin-top: 0.4rem;
    }

    p {
      margin-top: 0.4rem;
      width: 8.5067rem;
      font-size: .4rem;
      color: #999;
    }

    .cart-msk-box-btn {
      width: 8.5067rem;
      height: 1.5rem;
      color: $white-color;
      font-size: .4rem;
      border: 0;
      margin-top: 0.5rem;
      border-top: 1px solid #ddd;

      button {
        width: 4.25rem;
        height: 1.5rem;
        font-size: .4rem;
        color: $white-color;
        border: 0;
        background-color: #fff;
      }

      button:nth-child(1) {
        border-radius: 0 0 0 0.2667rem;
        color: #000;
        border-right: 1px solid #ddd;
      }

      button:nth-child(2) {
        border-radius: 0 0 0.2667rem 0;
        color: $orange-color;
      }
    }
  }


}
</style>
<template>
  <div class="cart-msk" ref="cartMsk" v-if="isShow">
    <!-- 温馨提示 -->
    <div class="cart-msk-box">
      <h6 v-if="title.length">{{ title }}</h6>
      <p v-if="message">{{ message }}</p>
      <div class="cart-msk-box-btn">
        <button>确定</button>
        <button>取消</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ConfirmationBox',
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: ''
    }
  }
}
</script>